<template>
  <div class="main">
    <Content>
      <template #content>
        <div class="b-w p-20-30 box">
          <div class="top-box ">
            <div class="boxs dispaly">
              <div class="left">
                <img :src="state.urlQueryData.img">
              </div>
              <div class="right dispaly-column-between">
                <div class="top">
                  <div class="t-title">{{ state.urlQueryData.name }}</div>
                  <div class="desc">{{ state.urlQueryData.introduce }}</div>
                </div>
                <div class="btn-box">
                  <div class="btn dispaly-align-center" @click="state.popShow = true">确认捐赠</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Content>
    <Pop/>

    <div class="mask ">
      <!-- 外层的遮罩 -->
      <div class="mask-cover " v-if="state.popShow"></div>
      <!-- 设置动画 -->
      <transition name="fade">
        <!-- 内容区 -->
        <div class="mask-content" v-if="state.popShow">
          <!-- 插槽，放置要插入到遮罩里的内容 -->
          <div class="my-confirm" v-if="state.popShow">
            <div class="wrapper dispaly-col-center">
              <div class="wrapper-box">
                <div class="detail">
                  <div class="close">
                    <img class="pointer" @click="state.popShow = false"
                         src="/src//assets/image/close.png">
                  </div>
                  <div class="desc dispaly-col-center">
                    <div class="t-title">请输入捐款金额</div>
                    <div class="form">
                      <div class="item dispaly-center">
                        <input type="number" placeholder="请填入捐赠金额" v-model="state.formData.price">
                      </div>
                      <div class="details">
                        <input type="text" placeholder="捐款原因（非必填）" v-model="state.formData.reason">
                      </div>
                    </div>
                    <div class="bottom-btn-box">
                      <div @click="postDonation" class="bottom-btn pointer dispaly-align-center">
                        确定
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>

  </div>
  <el-dialog v-model="state.centerDialogVisible" width="190" center>
    <div class="dispaly-col-center">
      <div class="title">
        请扫码支付
      </div>
      <div class="code">
        <img :src="codeUrl">
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import QRCode from 'qrcode'
import {reactive, onMounted, onUnmounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {donation, requestOrder} from '@/api/index/index'
import {ElMessage} from "element-plus";

const state = reactive({
  popShow: false,
  centerDialogVisible: false,
  formData: {
    price: '',
    reason: '',
    payType: '',
    type: '',
    ancestralId: '',
    modelType: 0
  },
  urlQueryData: {},
})

const route = useRoute()
const getQuery = () => {
  state.urlQueryData = JSON.parse(route.query.data)
  state.formData.type = route.query.type
  state.formData.ancestralId = state.urlQueryData.id
}

// 捐赠
let codeUrl = ref('')
let datas = ref({})
const postDonation = async () => {
  const res = await donation(state.formData)
  if (res.code == 200) {
    state.popShow = false
    codeUrl.value = await QRCode.toDataURL(res.data.payInfo)
    datas.value = res.data
    state.centerDialogVisible = true
  }
}

// 轮询
const router = useRouter()
const timerId = ref(null);
const lOrder = async () => {
  const res = await requestOrder({no: datas.value.orderNo, type: datas.value.type})
  if (res.code == 200) {
    if (res.data) {
      state.centerDialogVisible = false
      ElMessage({
        type: "success",
        message: "支付成功2秒后跳转",
      })
      setTimeout(() => {
        router.go(-1)
      }, 2000)
    }
  }
}


onUnmounted(() => {
  if (timerId.value) {
    clearInterval(timerId.value);
    timerId.value = null; // 可选，但有助于避免潜在的内存泄漏
  }
})
onMounted(() => {
  getQuery()
  timerId.value = setInterval(lOrder, 5000);
})
</script>

<style lang="scss" scoped>
.btn {
  font-family: MicrosoftYaHei;
  font-size: 22px;
  color: $primary-color;
  background-color: #ece7dc;
  width: 200px;
  height: 50px;
  border-radius: 5px;
  cursor: pointer;
}

.code {
  margin-top: 24px;
  margin-bottom: 26px;

  img {
    width: 138px;
    height: 138px;
  }
}

.main {
  .box {
    max-height: 700px;
    height: 700px;
    min-height: 700px;

    .top-box {
      padding: 30px;
      background-color: #fff;

      .boxs {
        padding-bottom: 30px;
        border-bottom: 2px solid #EDE7DB;

        .left {
          width: 282px;
          height: 282px;
          padding-right: 30px;
          border-right: 2px dashed #ccc;

          img {
            width: 282px;
            height: 282px;
            background: #20212A;
            border-radius: 5px;
          }
        }

        .right {
          padding-left: 35px;
          flex: 3;

          .btn-box {
            display: flex;
            justify-content: flex-end;
          }

          .top {
            .t-title {
              margin-bottom: 23px;
              font-family: MicrosoftYaHei, MicrosoftYaHei;
              font-weight: bold;
              font-size: 24px;
            }

            .desc {
              font-family: MicrosoftYaHei;
              font-size: 16px;
              color: #000000;
              line-height: 30px;
            }
          }
        }

      }

    }
  }
}


.my-confirm {
  transition: all .5s;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 6666;
  background: rgba(0, 0, 0, 0);

  &.fade {
    transition: all 0.4s;
    background: rgba(0, 0, 0, 0.5);
  }

  .wrapper {
    background-color: #ece7dc;
    width: 690px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;

    &.fade {
      transition: all 0.4s;
      transform: translate(-50%, -50%);
      opacity: 1;
    }

    .detail {
      padding: 60px 30px;

      .close {
        // text-align: right;
        position: absolute;
        top: 20px;
        right: 30px;

        img {
          width: 25px;
          height: 25px;
        }
      }

      .desc {
        background-color: #fff;
        width: 620px;
        height: 380px;
        border-radius: 12px;

        .t-title {
          font-weight: 700;
          color: $primary-color;
        }

        .title {
          color: $primary-color;
          font-family: FZXBSJW--GB1, FZXBSJW--GB1;
          font-weight: normal;
          font-size: 36px;
        }

        .reg-cntent {
          .item {
            color: $primary-color;
            font-family: FZXBSJW--GB1, FZXBSJW--GB1;
            font-weight: normal;
            font-size: 36px;
            text-align: center;
          }
        }

        .btn-box {
          margin-top: 20px;

          .btn:first-child {
            margin-right: 7px;
          }

          .btn:last-child {
            margin-left: 7px;
          }

          .btn {
            img {
              width: 122px;
              height: 32px;
            }
          }
        }

        .bottom-btn-box {
          margin-top: 20px;

          .bottom-btn {
            // background: url(../../assets/image/btn-bg.jpg) no-repeat;
            // background-size: cover;
            background-color: $primary-color;
            width: 252px;
            height: 62px;
            color: #fff;
            font-size: 25px;
            border-radius: 10px;
          }
        }

        .form {
          margin-top: 20px;

          .details {
            background-color: #ece7dc;
            border-radius: 10px;

            input {
              padding: 20px;
            }
          }

          .item:last-child {
            margin-bottom: 0;
          }

          .item {
            background: url(../../../src/assets/image/ipt-bg.png) no-repeat;
            background-size: cover;
            width: 430px;
            height: 66px;
            margin-bottom: 20px;
            position: relative;

            input::placeholder {
              color: $primary-color;
            }

            input {
              color: $primary-color;
              padding-left: 30px;
            }

            .get-code {
              background-color: $primary-color;
              color: #fff;
              padding: 5px;
              border-radius: 3px;
              position: absolute;
              top: 50%;
              right: 0;
              transform: translate(-50%, -50%);
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

// 最外层，设置position定位
.mask {
  position: relative;
  color: #2e2c2d;
  // font-size: 16px;
}

//遮罩，设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
.mask-cover {
  background: rgba($color: #000000, $alpha: 0.5);
  position: fixed;
  z-index: 1000;
  // 设置top、left、宽高保证全屏遮罩
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

//内容层，z-index要大于遮罩层，确保内容在遮罩上显示
.mask-content {
  position: fixed;
  top: 30%;
  height: 70%;
  z-index: 10000;
}

//动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>